<template>
	<div class="detail">
		<div class="flex-end" @click="close()">
			<u-icon name="close-circle" color="#fff" size="28"></u-icon>
		</div>
		<div class="cfff fbold text4 tCenter mb40">兑换</div>
		<div class="bfff box6 colum">
			<image v-if="detail.poster" :src="detail.poster[0]" mode="aspectFill" class="huiyuan-icon"></image>
			<div class="f32 fbold mb50">{{detail.name}}</div>
			<div class="ctheme f24 mb50"><span class="t-red fbold">{{detail.price}}</span>积分</div>


			<div class="center cfff mb30 btn btn-orange1" @click="setShow">兑换</div>
			<div class="center btn-white btn-orange1 f32" @click="goDetail(detail)" v-if="showDetail">查看详情</div>
		</div>

		<!-- 验证码弹出层 -->
		<u-popup :safeAreaInsetBottom="false" :show="show" mode="bottom" bgColor="transparent">
			<div class="detail">
				<div class="flex-end" @click="show=false">
					<u-icon name="close-circle" color="#fff" size="28"></u-icon>
				</div>
				<div class="cfff fbold text4 tCenter mb40">确认支付</div>
				<div class="bfff box6 colum">
					<div class="mb50 w100 mt50" v-if="url=='audio'||detail.type=='recharge'">
						<div class="f32 fbold mb30 ">充值帐号</div>
						<input type="text" placeholder="请输入充值帐号" placeholder-style="color:#CFCFCF" class="phone"
							v-model="account" />
					</div>
					<div class="mb50 w100">
						<div class="f32 fbold mb30">验证码</div>
						<div class="phone space-between">
							<input type="number" placeholder="请输入支付验证码" placeholder-style="color:#CFCFCF"
								v-model="phoneCode" />
							<div class="text1 f24 ctheme" @click="getPhoneVcode" v-if="time==60">获取验证码</div>
							<div class="text1 f24 ctheme" v-else>{{time}}</div>
						</div>
					</div>
					<div class="center cfff mt30 btn btn-orange1" @click="submit">确认支付</div>
				</div>
			</div>
		</u-popup>
	</div>
</template>

<script>
	export default {
		name: "duiHuan",
		data() {
			return {
				time: 60,
				account: '',
				phoneCode: '',
				userInfo: '',
				show: false,
				timeObj: {}
			};
		},
		props: {
			detail: {
				type: Object,
				default: {}
			},
			showDetail: {
				type: Boolean,
				default: false
			},
			url: {
				type: String,
				default: 'audio'
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('uInfo')
		},
		methods: {
			setShow() {
				clearTimeout(this.timeObj)
				this.time = 60
				this.show = true
			},
			// 兑换事件
			submit() {
				if (this.account == '' && (this.url == 'audio' || this.detail.type == 'recharge')) {
					uni.showToast({
						title: '请输入充值帐号',
						icon: 'none'
					})
					return
				}
				if (this.phoneCode == '') {
					uni.showToast({
						title: '请输入支付验证码',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '正在支付中',
					mask: true
				})
				this.$http('/api/' + this.url + '/order/submit', {
					phone: this.userInfo.phone,
					phoneCode: this.phoneCode,
					goodsId: this.detail.id,
					goodsName: this.detail.name,
					account: this.account,
					totalAmount: this.detail.price
				}, false, 'POST').then((r) => {
					uni.showToast({
						title: '兑换成功！'
					})
					this.close()
				})
			},
			// 查看详情
			goDetail() {
				this.$emit('goDetail', this.detail)
			},
			close() {
				this.$emit('close')
			},
			// 发送验证码
			getPhoneVcode() {
				// uni.showLoading({
				// 	title: '正在发送中'
				// })
				this.$http('/api/getPayPhoneVcode', {
					phone: this.userInfo.phone
				}).then(r => {
					this.setTime()
				})
			},
			setTime() {
				let that = this
				if (this.time == 0) {
					this.time = 60
					return
				}
				this.time--
				this.timeObj = setTimeout(() => {
					that.setTime()
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box1 {
		margin-top: -370rpx;

		.avatar {
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			border: 1rpx solid #F6EBEB;
		}
	}

	.phone {
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 0rpx #FDE9EA;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
		border: 1rpx solid #FDE9EA;
		padding: 0 50rpx 0 50rpx;
	}

	.text1 {
		color: #FF5555;
	}


	.detail {
		width: 100%;
		background: linear-gradient(to right, #FF5858, #F957A4);
		padding: 25rpx 25rpx 0;
		border-radius: 25rpx 25rpx 0 0;

		.text4 {
			font-size: 46rpx;
			margin-top: -30rpx;
		}

		.box6 {
			width: 100%;
			padding: 70rpx;
			border-radius: 25rpx 25rpx 0 0;

			.huiyuan-icon {
				width: 298rpx;
				height: 298rpx;
				margin-bottom: 35rpx;
				border-radius: 15rpx;
			}

			.t-red {
				font-size: 52rpx;
			}

			textarea {
				width: 578rpx;
				height: 150rpx;
				background: #F4F4F4;
				margin-top: 50rpx;
				border-radius: 15rpx;
				padding: 25rpx;
				margin-bottom: 116rpx;
			}

			.btn-orange1 {
				background: linear-gradient(to right, #FF5623, #FF8900);
				height: 90rpx;
				width: 574rpx;
				border-radius: 45rpx;
			}

			.btn-white {
				background: #FFFFFF;
				border: 1px solid #858585;
			}
		}
	}
</style>